<template>
  <div class="container">
    <div class="orders">
      <div class="order" v-for="item in orders" :key="item.orderCode">
        <div class="room-type">
          {{ item.roomType }}
        </div>
        <div class="order-info">
          <div class="order-code">
            订单号:{{ item.orderCode }}
          </div>
          <div class="order-desc">
            <div v-if="item.orderStatus === '已预定'" class="order-refund" @click="orderRefund(item.orderCode)">取消订单</div>
            <div v-if="item.orderStatus === '已结束'" class="order-comment" @click="comment(item)">评论</div>
            <div class="order-comment" @click="viewDetails(item)">查看详情</div>
          </div>
        </div>

        <div class="order-handle">
          <div class="order-reverse-price">{{ item.orderReversePrice.toLocaleString('zh-CN', {style: 'currency', currency: 'CNY'}) }}</div>
          <div v-if="item.orderStatus === '未支付'" @click="paid(item)" class="order-status-unpaid">未支付</div>
          <div v-if="item.orderStatus === '已预定'" class="order-status-reverse">已预定</div>
          <div v-if="item.orderStatus === '已入住'" class="order-status-checkin">已入住</div>
          <div v-if="item.orderStatus === '已退款'" class="order-status-finish">已退款</div>
          <div v-if="item.orderStatus === '已结束'" class="order-status-finish">已结束</div>
        </div>
      </div>
    </div>

    <el-dialog :width="dialog.width" :title="dialog.title" :visible.sync="dialog.visible" :destroy-on-close="true">
      <el-date-picker
          :clearable="dialog.picker.clearable"
          v-model="dialog.picker.time"
          type="daterange"
          key="pabulishDate"
          disabled
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-form :model="dialog.entity" status-ico :label-width="dialog.item.label_width" class="demo-ruleForm">
        <el-input disabled v-model="dialog.entity.orderStatus" show-overflow-tooltip :title="dialog.entity.orderStatus">
          <template slot="prepend">订单状态</template>
        </el-input>
        <el-input disabled v-model="dialog.entity.orderCode" show-overflow-tooltip :title="dialog.entity.orderCode">
          <template slot="prepend">订单号</template>
        </el-input>
        <el-input disabled v-model="dialog.entity.informPhone">
          <template slot="prepend">联系号码</template>
        </el-input>
        <el-input disabled v-model="dialog.entity.checkinName">
          <template slot="prepend">姓名</template>
        </el-input>
        <el-input disabled clearable v-model="dialog.entity.checkinIdentity">
          <template slot="prepend">身份证号</template>
        </el-input>
      </el-form>
    </el-dialog>

    <el-dialog :width="commentDialog.width" :title="commentDialog.title" :visible.sync="commentDialog.visible" :destroy-on-close="true">
      <el-form :model="commentDialog.entity" status-ico :label-width="commentDialog.item.label_width" class="demo-ruleForm">
        <ul class="comment-ul" style="overflow:auto" ref="comments">
          <li v-for="item in commentDialog.comment.entity" :key="item.id">
            <div class="acc-name" :title="item.accName">{{ item.accName }}</div>
            <div class="acc-comment">{{ item.comment }}</div>
          </li>
          <div v-if="commentDialog.comment.entity.length === 0">暂无评论</div>
        </ul>
        <div class="comment-input">
          <input v-model:value="commentDialog.comment.sendComment" type="text" placeholder="限长24个字"/>
          <button @click="sendComment">发送</button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {CommentAdd, CommentListByRoomCode, OrderList, OrderRefund, PurchaseOrder, RoomList} from "@/api";
import {InfiniteScroll, MessageBox, Notification} from "element-ui";
export default {
  directives: {
    "infinite-scroll": InfiniteScroll,
  },
  name: "Order",
  data(){
    return {
      orders: {},
      dialog: {
        title: '订单详情',
        width: '32%',
        item: {
          label_width: "80px"
        },
        visible: false,
        entity: {
          roomType: '',
          checkinStartTime: '',
          checkinEndTime: '',
          informPhone: '',
          checkinName: '',
          checkinIdentity: '',
          orderCode: '',
          orderStatus: ''
        },
        picker: {
          clearable: false,
          time: []
        }
      },
      commentDialog: {
        comment: {
          entity: [],
          sendComment: '',
          roomType: ''
        },
        title: '评论区',
        width: '32%',
        item: {
          label_width: "80px"
        },
        visible: false,
        picker: {
          clearable: false,
          time: []
        }
      }
    }
  },
  methods: {
    orderRefund(orderCode){

      MessageBox.confirm('确定取消订单？', '取消订单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        OrderRefund(orderCode).then(res => {
          OrderList().then(res => {
            this.orders = res.data
            console.log(res)
          })
          this.$message({
            type: 'success',
            message: res.message
          });
        })
      })
    },
    paid(order){
      MessageBox.confirm('支付' + order.orderReversePrice, '支付', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        PurchaseOrder(order.orderCode).then(res => {
          OrderList().then(res => {
            this.orders = res.data
            console.log(res)
          })
          this.$message({
            type: 'success',
            message: '支付成功!'
          });
          this.dialog.visible = false
          return
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消支付'
        });
      });
    },
    sendComment(){
      //判断字符
      if (this.commentDialog.comment.sendComment === null || this.commentDialog.comment.sendComment === ''){
        Notification.warning({
          title: '不能为空'
        })
      }
      if (this.commentDialog.comment.sendComment.length > 24){
        Notification.warning({
          title: '内容过长'
        })
      }
      const roomType = this.commentDialog.comment.roomType
      const comment = this.commentDialog.comment.sendComment
      console.log(roomType)
      console.log(comment)
      CommentAdd(
        roomType,
        comment
      ).then(res => {
        this.commentDialog.comment.sendComment = ''
        this.commentDialog.comment.entity.push(res.data)
        this.$nextTick(() => {
          this.$refs.comments.scrollTop = this.$refs.comments.scrollHeight
        })
      })
    },
    comment(item){
      console.log(item)
      this.commentDialog.comment.roomType = item.roomType
      CommentListByRoomCode(item.roomType).then(res => {
        console.log(res)
        this.commentDialog.comment.entity = res.data
        this.commentDialog.visible = true
        this.$nextTick(() => {
          this.$refs.comments.scrollTop = this.$refs.comments.scrollHeight
        })
      })
    },
    viewDetails(order){
      this.dialog.entity = order
      this.dialog.picker.time = [order.checkinStartTime.split("T")[0], order.checkinEndTime.split("T")[0]]
      this.dialog.visible = true
    }
  },
  beforeMount() {
    let comments = this.$refs.comments
    console.log(comments)
    console.log("aaaa")
  },
  created() {
    OrderList().then(res => {
      this.orders = res.data
      console.log(res)
    })
  }
}
</script>

<style scoped lang="less">
.container{
  .comment-input{
    margin-top: 24px;
    display: flex;
    align-items: center;
    input{
      border-radius: 4px;
      font-size: 14px;
      max-width: 72%;
      width: 72%;
      border: 1px solid darkgrey;
      padding: 2px;
      box-sizing: border-box;
      height: 32px;
    }
    button:hover{
      background: #7070f8;
      color: white;
    }
    button:active{
      background: #8b8bf8;
      color: white;
    }
    button{
      background: #aaaafc;
      cursor: pointer;
      color: white;
      height: 32px;
      max-width: 28%;
      border: 1px solid darkgrey;
      border-radius: 4px;
      width: 36%;
      box-sizing: border-box;
    }
  }
  .comment-ul{
    height: 300px;
    margin: 0;
    padding: 0;
    li{
      margin-bottom: 16px;
      list-style: none;
      display: flex;
      flex-direction: column;
      .acc-name{
        max-width: 80px;
        text-align: left;
        /*强制文字在一行文本框内*/
        white-space: nowrap;
        /*溢出部分文字隐藏*/
        overflow: hidden;
        /*溢出部分省略号处理*/
        text-overflow: ellipsis;
        font-size: 16px;
      }
      .acc-comment{
        text-align: left;
        font-size: 20px;
        margin: 4px 16px;
        background: darkgrey;
        padding: 4px;
        border: 1px solid darkgrey;
        border-radius: 4px;
        box-shadow: 0 0 5px 4px darkgrey;
      }
    }
  }

  /deep/ .el-dialog{
    min-width: 488px;
    .el-dialog__header{
      .el-dialog__title{
        color: darkred;
        font-weight: 600;
      }
    }
    .el-dialog__body{
      padding-right: 68px;
      padding-left: 68px;
      .el-input{
        margin-top: 16px;
      }
      .el-input__inner{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
  }
  .orders{
    display: flex;
    flex-flow: row wrap-reverse;
    justify-content: center;
    .order:hover{
      box-shadow: 0 0 5px 4px darkgrey;
    }
    .order{
      margin: 8px 32px;
      background: #eee9e8;
      width: 720px;
      min-width: 600px;
      border: 0;
      //border-radius: 38px;
      display: flex;
      border-radius: 8px;
      flex-flow: row nowrap;
      justify-content: space-between;
      .room-type{
        width: 80px;
        height: 80px;
        border-radius: 8px;
        display: flex;
        justify-content: space-evenly;
        border: 1px solid darkgrey;
        background: #d3d3d3;
        color: darkgrey;
        align-items: center;
      }
      .order-info{
        font-family: '楷体';
        margin: 8px 8px;
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        flex-flow: column nowrap;
        .order-code{
          font-size: 14px;
        }
        .order-desc{
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          width: 100%;
          flex-flow: row nowrap;
        }
        .order-refund{
          cursor: pointer;
        }
        .order-comment{
          font-family: '楷体';
          cursor: pointer;
          font-size: 14px;
          display: flex;
          align-content: space-around;
          flex-direction: column;
          justify-content: space-evenly;
        }
      }
      .order-handle{
        font-family: '楷体';
        display: flex;
        align-content: space-around;
        flex-direction: column;
        justify-content: space-evenly;
        margin-right: 8px;
        .order-reverse-price{
          color: red;
          font-size: 16px;
          align-items: flex-end;
        }
        .order-status-unpaid:hover{
          background: #f56c6c;
          color: white;
        }
        .order-status-unpaid:active{
          background: #f34f52;
          color: white;
        }
        .order-status-unpaid{
          background: #fef0f0;
          cursor: pointer;
          color: red;
          border-radius: 4px;
          border: 1px solid red;
          padding: 4px;
          width: 64px;
        }
        .order-status-finish{
          cursor: not-allowed;
          color: #b7b6b6;
          padding: 4px;
          width: 64px;
        }
        .order-status-reverse,.order-status-checkin{
          background: #b7b6b6;
          cursor: not-allowed;
          color: #ffffff;
          border-radius: 4px;
          border: 1px solid #777777;
          padding: 4px;
          width: 64px;
        }
      }
    }
  }
}
</style>